<template>
  <div id="SupplierAccount">
    <h1>供应商结账页面</h1>
    <table border="1">
      <thead>
      <tr>
        <th>订单编号</th>
        <th>产品名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>小计</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(od, index) in orderDetails" :key="index">
        <td>{{ od.orderId }}</td>
        <td>{{ od.productName }}</td>
        <td>{{ od.quantity }}</td>
        <td>{{ od.unitPrice }}</td>
        <td>{{ od.subtotal }}</td>
      </tr>
      </tbody>
    </table>
    <button @click="settleAccount">结账</button>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "SupplierAccount",
  components: {},
  props: {},
  data() {
    return {
      supplierId: null, // 初始化为null，需要根据实际情况获取
      orderDetails: []
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getOrderDetails() {
      try {
        const response = await this.$axios.post(
            'http://localhost:8090/supplier-product/getSupplierOrderDetails',
            {
              supplierId: this.supplierId // 确保 this.supplierId 有正确的值
            },
            {
              headers: {
                'Content-Type': 'application/json'
              }
            }
        );
        this.orderDetails = response.data;
      } catch (error) {
        console.error('Error fetching order details:', error);
      }
    },
    async settleAccount() {
      try {
        const response = await this.$axios.post('http://localhost:8090/supplier-product/settleSupplierAccount', this.supplierId);
        if (response.data) {
          alert('结账成功');
          this.getOrderDetails();
        } else {
          alert('结账失败');
        }
      } catch (error) {
        console.error('Error settling account:', error);
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 从路由参数中获取supplierId
    this.supplierId = this.$route.params.supplierId;
    this.getOrderDetails();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  // 生命周期 - 创建之前
  beforeCreate() {
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 更新之前
  beforeUpdate() {
  },
  // 生命周期 - 更新之后
  updated() {
  },
  // 生命周期 - 销毁之前
  beforeDestroy() {
  },
  // 生命周期 - 销毁完成
  destroyed() {
  },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  }
};
</script>

<style scoped>

</style>